<template>
    <view :class="pageClass" :style="pageStyle" v-if="pageReady">
        <moxi-nav :set="navSet"></moxi-nav>
        <view class="addUser" :style="{ '--app-color': app_color, '--app-color-18': colorList[18] }">
            <view class="map">
                <map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers"
                    :controls="controls" :show-location="true" :show-compass="true" @regionchange="regionchange">
                </map>
            </view>
            <view class="controll">
                <view class="top">
                    <view class="selectList">
                        <view class="selectItem" @click="typeShow = true">
                            <view>
                                {{ selectList[0].length > 0 ? selectList[0][info.index].label : '全部' }}
                            </view>
                            <view>
                                <u-icon name="arrow-down" size="14" top="1.2"></u-icon>
                            </view>
                        </view>
                        <!-- <view class="selectItem clickAc" @click="navto('/plugin_oa/followRecords')"
                            style="padding: 2px 8px; font-size: 12px; position: relative; border-radius: 4px; overflow: hidden; background-color: var(--app-color-18); color: var(--app-color); border: 1px solid var(--app-color);">
                            跟进记录</view> -->
                    </view>
                    <view class="seachInput">
                        <view class="seachIcon">
                            <u-icon name="search" size="18" top="-0.5" color="#999"></u-icon>
                        </view>
                        <input v-model="info.oldSearch" type="text" placeholder="搜索客户名称"
                            placeholder-style="color: #999;">
                        <u-transition :show="info.oldSearch ? true : false"
                            :customStyle="{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginRight: '4px' }">
                            <u-icon name="close-circle" size="18" top="-0.5" color="#999"
                                @click="info.oldSearch = ''"></u-icon>
                        </u-transition>
                        <view class="seachBtn clickAc" @click="get(1)">
                            搜索
                        </view>
                    </view>
                </view>
                <view class="scrollY">
                    <scroll-view @scrolltolower="() => { if (status == 'loading') get(info.page + 1) }" scroll-y
                        style="height: 100%;" v-if="data.length > 0" :scroll-top="scrollTop" @scroll="scroll"
                        :scroll-into-view="'item-' + currentIndex">
                        <view class="item" @click="getCurrentIndex(index)" :class="{ 'active': index == currentIndex }"
                            v-for="(item, index) in data" :id="'item-' + index">
                            <view class="top">
                                <view class="u-line-1" style="font-weight: bold;">{{ item.company }}</view>
                                <view class="tag" v-for="tag in tagList" v-if="item.status == tag.status"
                                    :style="{ '--status-color': tag.color }"
                                    style="white-space: nowrap; margin: 0 0 0 auto;">
                                    <view>{{ tag.name }}</view>
                                </view>
                                <view style="color: #666; font-size: 12px; ">
                                    {{
                                        getDistance(userLocation.latitude, userLocation.longitude, parseFloat(item.la),
                                            parseFloat(item.ln))
                                    }}km</view>
                            </view>
                            <view class="center">
                                <view class="tagList" v-if="item.tag.length > 0">
                                    <view class="tagItem plain" v-for="tag in item.tag">{{ tag }}</view>
                                </view>
                                <view class="desc">
                                    <view style="display: flex; align-items: center;"
                                        @click.stop="() => { currentIndex = index; navShow = true; }">
                                        <view class="u-line-1">
                                            {{ item.address }}
                                        </view>
                                        <view>
                                            <u-icon name="arrow-right" color="#666" size="12" top="1"></u-icon>
                                        </view>
                                    </view>
                                    <view class="icon clickAc"
                                        @click.stop="() => { currentIndex = index; latitude = parseFloat(item.la); longitude = parseFloat(item.ln); }">
                                        <u-icon size="14" name="map" color="#fff"></u-icon>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="loading">
                            <u-loadmore :status="status" />
                        </view>
                    </scroll-view>
                    <view v-else style="height: 100%; display: flex; align-items: center; justify-content: center;">
                        <u-empty mode="data">
                        </u-empty>
                    </view>
                </view>
                <view class="btn clickAc" @click="() => { addShow = true; addType = 0; }">添加客户</view>
            </view>
            <view class="location clickAc"
                @click="() => { latitude = userLocation.latitude; longitude = userLocation.longitude }">
                <u-icon name="map-fill" size="16"></u-icon>
            </view>
        </view>
        <!-- 选择类型 -->
        <view>
            <u-picker :show="typeShow" @close="typeShow = false" @cancel="typeShow = false" closeOnClickOverlay
                :columns="selectList" @confirm="confirm" keyName="label" :defaultIndex="[info.index]"></u-picker>
        </view>
        <!-- 點擊導航 -->
        <view>
            <u-action-sheet round="10" cancelText="取消" :actions="navList" :show="navShow" safeAreaInsetBottom
                @close="navShow = false" @select="selectClick"></u-action-sheet>
        </view>
        <!-- 添加 -->
        <view>
            <u-popup :show="addShow" mode="bottom" @close="clearAddForm" round="10" :safeAreaInsetBottom="false"
                :customStyle="{ maxHeight: 'calc(100vh - 200rpx)' }" :zIndex="13" :overlayStyle="{ zIndex: 12 }">
                <view class="pop" :style="{ '--app-color': app_color }">
                    <view class="top">
                        <view></view>
                        <view style="font-size: 14px; font-weight: bold;">{{ addType == 0 ? '添加' : '修改' }}客户</view>
                        <view @click="clearAddForm">
                            <u-icon name="close" color="#333" size="14" top="2"></u-icon>
                        </view>
                    </view>
                    <view class="form" style="background-color: #fff;">
                        <moxi-form v-for="item in addForm" v-model="item.value" :input="item"
                            :color="app_color"></moxi-form>
                    </view>
                    <view class="btn clickAc" :style="{ backgroundColor: app_color }" @click="addCustomer">
                        {{ addType == 0 ? '添加' : '修改' }}
                    </view>
                </view>
            </u-popup>
        </view>
        <!-- 详情 -->
        <view>
            <u-popup :show="taskShow" @open="" mode="bottom" @close="taskShow = false" round="10"
                :safeAreaInsetBottom="false" :customStyle="{ minHeight: '90vh', maxHeight: '90vh' }" :zIndex="11"
                :overlayStyle="{ zIndex: 10 }">
                <view class="pop">
                    <view class="top">
                        <view></view>
                        <view style="font-size: 14px; font-weight: bold;">我的客户</view>
                        <view @click="taskShow = false">
                            <u-icon name="close" size="18" color="#333"></u-icon>
                        </view>
                    </view>
                    <view class="form">
                        <view class="formItem">
                            <view>公司名称</view>
                            <view>
                                <u-tooltip :text="currentData.company" overlay direction="bottom"></u-tooltip>
                            </view>
                        </view>
                        <view class="formItem" @click.stop="() => { navShow = true; }">
                            <view>公司地址</view>
                            <view class="flex">
                                <view>{{ currentData.address }}</view>
                                <view>
                                    <u-icon name="arrow-right" size="14" color="#666" top="0.5"></u-icon>
                                </view>
                            </view>
                        </view>
                        <view class="formItem">
                            <view>审核状态</view>
                            <view class="tag" :style="{
                                '--tag-color': currentData.review == -1 ? '#FF9B53' : currentData.review == 0 ? '#E93636' :
                                    currentData.review == 1 ? '#1A9C55' : '#666'
                            }">
                                {{ currentData.review == -1 ? '未审核' : currentData.review == 0 ? '不通过' :
                                    currentData.review == 1 ? '通过' : '未知' }}
                            </view>
                        </view>
                        <view class="formItem">
                            <view>跟进状态</view>
                            <view class="tag" :style="{
                                '--tag-color': currentData.status == 0 ? '#FF9B53' : currentData.status == 1 ? '#6E25E8' :
                                    currentData.status == -1 ? '#E93636' : currentData.status == 100 ? '#1A9C55' : '#666'
                            }">{{ currentData.status == 0 ? '待跟进' : currentData.status == 1 ? '跟进中' :
                                currentData.status == -1 ? '已放弃' : currentData.status == 100 ? '已成交' : '未知' }}</view>
                        </view>
                        <view class="formItem">
                            <view>联系人姓名</view>
                            <view>{{ currentData.name || '暂无' }}</view>
                        </view>
                        <view class="formItem">
                            <view>标签</view>
                            <view class="tagList" :style="{ '--tag-color': app_color }"
                                v-if="currentData.tag && currentData.tag.length > 0">
                                <view class="tag" v-for="(item, index) in currentData.tag" :key="index">
                                    <view>{{ item }}</view>
                                </view>
                            </view>
                            <view class="tag" v-else>暂无</view>
                        </view>
                        <view class="formItem">
                            <view>跟进记录</view>
                            <view class="flex" v-if="currentData.follow > 0" @click="getRecord(1, false, true)">
                                <view>共{{ currentData.follow }}条记录</view>
                                <view>
                                    <u-icon name="arrow-right" size="14" color="#666" top="0.5"></u-icon>
                                </view>
                            </view>
                            <view v-else>暂无记录</view>
                        </view>
                        <view class="formItem">
                            <view>年龄</view>
                            <view>{{ currentData.age }}</view>
                        </view>
                        <view class="formItem">
                            <view>性别</view>
                            <view>{{ currentData.sex == 1 ? '男' : currentData.sex == 2 ? '女' : '未知' }}</view>
                        </view>
                        <view class="formItem">
                            <view>联系人电话</view>
                            <view>
                                <u-tooltip :text="currentData.tel || '暂无'" overlay direction="bottom"></u-tooltip>
                            </view>
                        </view>
                        <view class="formItem">
                            <view>联系人微信</view>
                            <view>
                                <u-tooltip :text="currentData.wx || '暂无'" overlay direction="bottom"></u-tooltip>
                            </view>
                        </view>
                        <view class="formItem">
                            <view>联系人qq</view>
                            <view>
                                <u-tooltip :text="currentData.qq || '暂无'" overlay direction="bottom"></u-tooltip>
                            </view>
                        </view>
                        <view class="formItem">
                            <view>邮箱</view>
                            <view>
                                <u-tooltip :text="currentData.email || '暂无'" overlay direction="bottom"></u-tooltip>
                            </view>
                        </view>
                        <view class="formItem">
                            <view>其他联系方式</view>
                            <view>{{ currentData.lianxi || '暂无' }}</view>
                        </view>
                        <view class="formItem">
                            <view>用户意向</view>
                            <view>{{ currentData.intention }}分</view>
                        </view>
                    </view>
                    <view style="display: flex; gap: 8px;" v-if="currentData.review != 1">
                        <view @click="edit" class="btn clickAc" :style="{ borderColor: app_color, color: app_color }">
                            修改信息
                        </view>
                        <view @click="() => { followShow = true, followType = 0 }" class="btn clickAc"
                            :style="{ backgroundColor: app_color }">
                            添加跟进
                        </view>
                    </view>
                </view>
            </u-popup>
        </view>
        <!-- 添加跟进 -->
        <view>
            <u-popup :show="followShow" mode="bottom" @close="clearFollowForm" round="10" :safeAreaInsetBottom="false"
                :customStyle="{ maxHeight: '84vh' }" :zIndex="20" :overlayStyle="{ zIndex: 19 }">
                <view class="pop">
                    <view class="top">
                        <view></view>
                        <view style="font-size: 14px; font-weight: bold;">{{ followType == 0 ? '添加' : '修改' }}记录</view>
                        <view @click="taskShow = false">
                            <u-icon name="close" size="14" color="#333"></u-icon>
                        </view>
                    </view>
                    <view class="form">
                        <moxi-form v-for="item in followForm" v-model="item.value" :input="item"
                            :color="app_color"></moxi-form>
                    </view>
                    <view @click="addFollow()" class="btn clickAc" :style="{ backgroundColor: app_color }">
                        {{ followType == 0 ? '添加' : '修改' }}
                    </view>
                </view>
            </u-popup>
        </view>
        <!-- 跟进记录 -->
        <view>
            <u-popup :show="recordShow" mode="bottom" @close="recordShow = false" round="10"
                :safeAreaInsetBottom="false"
                :customStyle="{ minHeight: 'calc(100vh - 200rpx)', maxHeight: 'calc(100vh - 200rpx)' }" :zIndex="14"
                :overlayStyle="{ zIndex: 13 }">
                <view class="pop">
                    <view class="top">
                        <view></view>
                        <view style="font-size: 14px; font-weight: bold;">跟进记录</view>
                        <view @click="taskShow = false">
                            <u-icon name="close" size="14" color="#333"></u-icon>
                        </view>
                    </view>
                    <view style="flex: 1; display: flex; overflow: hidden;" :style="{ '--tag-color': app_color }">
                        <scroll-view scroll-y style="flex: 1;" v-if="recordData.length > 0"
                            @scrolltolower="() => { if (recordStatus == 'loading') getRecord(recordInfo.page + 1, false, true) }">
                            <view class="u-list-item" v-for="(item, index) in recordData">
                                <view class="time_line" :style="{ '--bg-color': app_color, }">
                                    <view class="cricle">
                                        <!-- 可以插入图标，大小和cricle一样 -->
                                    </view>
                                    <view class="line" v-if="index + 1 != recordData.length"></view>
                                </view>
                                <view class="item">
                                    <view class="title">跟进说明:</view>
                                    <view class="textArea">
                                        <view class="u-line-3">{{ item.content || '暂无跟进内容' }}</view>
                                    </view>
                                </view>
                                <view class="item">
                                    <view class="title">跟进标签:</view>
                                    <view style="margin-bottom: 4px;" class="tagList"
                                        v-if="item.tag && item.tag.length > 0">
                                        <view class="tag" v-for="tag in item.tag">{{ tag }}</view>
                                    </view>
                                    <view style="margin-bottom: 4px;" v-else>暂无标签</view>
                                </view>
                                <view class="item flex">
                                    <span class="title">操作:</span>
                                    <span style="display: inline-flex; margin: 4px 0;">
                                        <u-button text="修改" type="error" @click="editRecord(item)"
                                            size="mini"></u-button>
                                    </span>
                                </view>
                                <view class="item">
                                    <span class="title">提交时间:</span>
                                    <span style="display: inline-flex;font-size: 12px;">{{
                                        $u.timeFormat(item.u_time,
                                            'yyyy-mm-dd hh:MM:ss') }}</span>
                                </view>
                            </view>
                            <u-loadmore :status="recordStatus" />
                        </scroll-view>
                    </view>
                </view>
            </u-popup>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            sys: {},
            latitude: 39.909,
            longitude: 116.39742,
            userLocation: {
                latitude: 39.909,
                longitude: 116.39742,
            },
            covers: [],
            controls: [],
            typeShow: false,
            selectList: [
                []
            ],
            tagList: [
                {
                    name: '已放弃',
                    status: -1,
                    color: '#E93636'
                },
                {
                    name: '待跟进',
                    status: 0,
                    color: '#FF9B53'
                },
                {
                    name: '跟进中',
                    status: 1,
                    color: '#6E25E8'
                },
                {
                    name: '已成交',
                    status: 100,
                    color: '#1A9C55'
                },
            ],
            addShow: false,
            taskShow: false,
            addForm: [
                {
                    name: '公司名称',
                    type: 'input-text',
                    value: '',
                    desc: '请输入公司名称',
                    must: 1,
                    attribute: 'company',
                },
                {
                    name: '联系人姓名',
                    type: 'input-text',
                    value: '',
                    desc: '请输入联系人姓名',
                    must: 0,
                    attribute: 'name',
                },
                {
                    name: '标签',
                    type: 'input-tag',
                    value: [],
                    desc: '请输入客户标签',
                    param: [5],
                    must: 0,
                    attribute: 'tag',
                },
                {
                    name: '年龄',
                    type: 'numberBox',
                    value: '0',
                    desc: '岁',
                    param: [0, 100, 1],
                    must: 0,
                    attribute: 'age',
                },
                {
                    name: '性别',
                    type: 'select',
                    value: '',
                    desc: '请选择性别',
                    param: ['男', '女'],
                    must: 0,
                    attribute: 'sex',
                },
                {
                    name: '邮箱',
                    type: 'input-text',
                    value: '',
                    desc: '请输入邮箱',
                    must: 0,
                    attribute: 'email',
                },
                {
                    name: '联系人电话',
                    type: 'input-number',
                    value: '',
                    desc: '请输入联系人电话',
                    must: 0,
                    attribute: 'tel',
                },
                {
                    name: '联系人微信',
                    type: 'input-text',
                    value: '',
                    desc: '请输入联系人微信',
                    must: 0,
                    attribute: 'wx',
                },
                {
                    name: '联系人qq',
                    type: 'input-number',
                    value: '',
                    desc: '请输入联系人qq',
                    must: 0,
                    attribute: 'qq',
                },
                {
                    name: '其他联系方式',
                    type: 'input-textarea',
                    value: '',
                    desc: '请输入其他联系方式',
                    must: 0,
                    attribute: 'lianxi',
                },
                {
                    name: '用户意向',
                    type: 'slider',
                    value: '5',
                    desc: '用于评估客户意向，1-10进行打分',
                    must: 0,
                    param: [1, 10, 1],
                    attribute: 'intention',
                },
                {
                    name: '详细地址及门牌号',
                    type: 'input-textarea',
                    value: '',
                    desc: '请输入详细地址，例xx区/县xx街道xx小区1层101室1',
                    must: 0,
                    attribute: 'address',
                }
            ],
            addType: 0, // 0添加 1修改
            currentIndex: -1,
            currentData: {},
            info: {
                page: 1,
                page_num: 10,
                status: -2,
                index: 0,
                search: '',
                oldSearch: '',
            },
            data: [],
            status: 'loading',
            navShow: false,
            navList: [
                {
                    name: '复制地址',
                },
                {
                    name: '打开导航',
                }
            ],
            first: true,
            scrollTop: 0,
            old: {
                scrollTop: 0
            },
            followShow: false,
            followType: 0,
            followForm: [
                {
                    name: '标签',
                    type: 'input-tag',
                    value: [],
                    desc: '请输入客户标签',
                    param: [5],
                    must: 0,
                    attribute: 'tag',
                },
                {
                    name: '跟进内容',
                    type: 'input-textarea',
                    value: '',
                    desc: '请输入跟进内容',
                    must: 1,
                    attribute: 'content',
                },
                {
                    name: '用户意向',
                    type: 'slider',
                    value: '5',
                    desc: '用于评估客户意向，1-10进行打分',
                    must: 1,
                    param: [1, 10, 1],
                    attribute: 'intention',
                },
                {
                    name: '图片上传',
                    type: 'img',
                    value: [],
                    param: [5],
                    must: 0,
                    attribute: 'file',
                },
                {
                    name: '视频上传',
                    type: 'video',
                    value: [],
                    param: [5],
                    must: 0,
                    attribute: 'video_list',
                },
            ],
            recordShow: false,
            recordData: [],
            recordInfo: {
                id: -1,
                status: -2,
                page: 1,
                page_num: 10,
            },
            recordStatus: 'loading',
            followId: -1,
        };
    },
    onLoad(options) {
        if (!this.userinfo || !this.userinfo.id) {
            // 清空缓存
            this.toLogin();
            return;
        };
        let data = this.cache('/plugin_oa/addUser/status');
        if (data) {
            this.currentIndex = data.currentIndex;
            this.$set(this, 'info', data.info)
            this.$set(this, 'data', data.data);
            this.$set(this, 'currentData', this.data[this.currentIndex]);
            this.status = data.status;
            this.$set(this, 'selectList', data.selectList);
            this.$set(this, 'userLocation', data.userLocation);
            this.latitude = this.userLocation.latitude;
            this.longitude = this.userLocation.longitude;
            this.$nextTick(() => {
                if (this.currentData) {
                    this.$set(this, 'taskShow', data.taskShow);
                }
                // 清除缓存
                uni.removeStorageSync('/plugin_oa/addUser/status');
            });
        }
    },
    onShow() {
        if (this.data.length == 0) {
            if (this.first) {
                // 第一次页面显示
                this.getLocation(true);
                this.first = false;
            } else {
                // 后续页面显示
                this.getLocation(false);
            }
        }
    },
    mounted() {

    },
    methods: {
        editRecord(data) {
            console.log(data);
            this.followType = 1;
            this.followForm.forEach(form => {
                if (form.attribute == 'file') {
                    let imgList = [];
                    data[form.attribute].forEach(img => {
                        imgList.push(this.userinfo.cur_url + img.file);
                    })
                    console.log(imgList);

                    form.value = imgList;
                } else {
                    form.value = data[form.attribute]
                }
            })
            this.followId = data.id;
            this.$nextTick(() => {
                this.followShow = true;
            })
        },
        addFollow() {
            // 验证必填字段
            for (let i = 0; i < this.followForm.length; i++) {
                if (this.followForm[i].must == 1 && (!this.followForm[i].value || this.followForm[i].value.length == 0)) {
                    this.msg(this.followForm[i].name + '不能为空');
                    return;
                }
            }

            // 处理表单数据
            let formData = {};
            this.followForm.forEach(item => {
                formData[item.attribute] = item.value;
            });

            formData.customer_id = this.currentData.id;

            if (this.followType == 1) {
                formData.id = this.followId;
            }

            console.log(formData);

            // 发送请求
            this.moxiPost(
                '/plugin/oa/user/follow/add',
                formData,
                (res) => {
                    this.followId = -1;
                    if (this.followType == 0) {
                        this.$set(this.currentData, 'follow', this.currentData.follow + 1);
                    } else if (this.followType == 1) {
                        let data = this.recordData.find(item => item.id == this.followId);
                        if (data) {
                            this.followForm.forEach(item => {
                                data[item.attribute] = item.value;
                            })
                        }

                    }
                    this.clearFollowForm();
                    this.msg(res.hint);
                }
            )
        },
        getRecord(page, e = false, open = false) {
            if (page) this.recordInfo.page = page;
            if (e) {
                if (this.recordInfo.status == e.status) return;
                this.recordInfo.status = e.status;
            } else {
                this.recordInfo.status = -2;
            }
            this.recordInfo.id = this.currentData.id;
            this.moxiPost(
                '/plugin/oa/user/follow/get',
                this.recordInfo,
                (res) => {
                    if (page == 1) {
                        this.$set(this, 'recordData', res.data.data)
                    } else {
                        this.recordData.push(...res.data.data)
                    }
                    if (res.data.data.length < this.recordInfo.page_num) {
                        this.recordStatus = 'nomore'
                    } else {
                        this.recordStatus = 'loading'
                    }

                    this.$nextTick(() => {
                        this.recordShow = open
                    })
                }
            )
        },
        clearFollowForm() {
            this.followForm.forEach(item => {
                // 判断value是否为数组
                if (Array.isArray(item.value)) {
                    item.value = []
                } else {
                    if (item.attribute == 'intention') {
                        item.value = '5'
                    } else {
                        item.value = ''
                    }
                }
            });
            this.$nextTick(() => {
                this.followShow = false;
            })
        },
        scroll(e) {
            this.old.scrollTop = e.detail.scrollTop
        },
        goTop(e) {
            this.scrollTop = this.old.scrollTop
            this.$nextTick(function () {
                this.scrollTop = 0
            });
        },
        regionchange(e) {
            // 监听地图区域变化，更新位置数据
            if (e.type === 'end') {
                // 获取新的中心点坐标
                const newLatitude = e.detail.centerLocation.latitude;
                const newLongitude = e.detail.centerLocation.longitude;

                // 计算坐标变化量
                const latDiff = Math.abs(newLatitude - this.latitude);
                const lngDiff = Math.abs(newLongitude - this.longitude);

                // 只有当坐标变化超过一定阈值时才更新地图中心点
                // 阈值可以根据需要调整，这里设置为0.0001度
                if (latDiff > 0.0001 || lngDiff > 0.0001) {
                    this.latitude = newLatitude;
                    this.longitude = newLongitude;
                }
            }
        },
        addCustomer() {
            // 验证必填字段
            for (let i = 0; i < this.addForm.length; i++) {
                if (this.addForm[i].must == 1 && (!this.addForm[i].value || this.addForm[i].value.length == 0)) {
                    this.msg(this.addForm[i].name + '不能为空');
                    return;
                }
            }

            // 处理表单数据
            let formData = {};
            this.addForm.forEach(item => {
                if (item.attribute == 'sex') {
                    if (item.value == '男') {
                        formData[item.attribute] = 1
                    } else if (item.value == '女') {
                        formData[item.attribute] = 2
                    } else if (item.value == '') {
                        formData[item.attribute] = 0
                    }
                } else {
                    formData[item.attribute] = item.value;
                }
            });

            formData.la = this.userLocation.latitude
            formData.ln = this.userLocation.longitude

            formData.uid = this.userinfo.id
            formData.review = -1

            if (this.addType == 1) {
                formData.id = this.data[this.currentIndex].id
            }

            this.moxiPost(
                '/plugin/oa/user/customer/add',
                formData,
                (res) => {
                    if (this.addType == 0) {
                        console.log('添加客户后获取');
                        this.get(1);
                    } else if (this.addType == 1) {
                        // 修改this.data[this.currentIndex] 的数据,遍历formData避免某些属性没了
                        for (let key in formData) {
                            this.data[this.currentIndex][key] = formData[key];
                        }
                        this.getCurrentIndex(this.currentIndex);
                    }
                    this.clearAddForm();
                    // 显示成功消息
                    this.msg(res.hint);
                }
            )
        },
        clearAddForm() {
            // 重置表单
            this.addForm.forEach(item => {
                // 判断value是否是数组
                if (item.attribute == 'intention') {
                    item.value = '5';
                } else if (item.attribute == 'tag') {
                    item.value = [];
                } else {
                    item.value = '';
                }
            });
            // 提交后关闭弹窗
            this.$nextTick(() => {
                this.addShow = false;
            })
        },
        selectClick(index) {
            let name = index.name
            let data = this.data[this.currentIndex]
            console.log(data);
            let area = data.province + data.city + data.area
            let address = area + data.address;
            if (name == '复制地址') {
                uni.setClipboardData({
                    data: address,
                });
            } else if (name == '打开导航') {
                // 状态缓存
                let currentData = {
                    currentIndex: this.currentIndex,
                    data: this.data,
                    info: this.info,
                    taskShow: this.taskShow,
                    userLocation: this.userLocation,
                    selectList: this.selectList,
                    status: this.status,
                }
                this.cache('/plugin_oa/addUser/status', currentData);

                uni.openLocation({
                    latitude: parseFloat(data.la), // 目标地点的纬度，浮点数，范围为-90~90
                    longitude: parseFloat(data.ln), // 目标地点的经度，浮点数，范围为-180~180
                    name: data.address, // 位置名
                    address: data.address, // 地址的详细说明
                });
            }
        },
        confirm(e) {
            this.typeShow = false;
            if (this.info.index == e.indexs[0]) return;
            this.info.index = e.indexs[0];
            this.info.status = e.value[0].status;
            console.log('状态');
            this.get(1);
        },
        edit() {
            let data = this.data[this.currentIndex];
            this.addForm.forEach(item => {
                if (item.attribute == 'sex') {
                    if (data[item.attribute] == 1) {
                        item.value = '男'
                    } else if (data[item.attribute] == 2) {
                        item.value = '女'
                    } else if (data[item.attribute] == 0) {
                        item.value = '未知'
                    }
                } else {
                    item.value = data[item.attribute];
                }
            })
            this.$nextTick(() => {
                this.addType = 1;
                this.addShow = true;
            })
        },
        getCurrentIndex(index) {
            this.currentIndex = index;
            this.$set(this, 'currentData', this.data[index]);
            this.$nextTick(() => {
                this.taskShow = true;
            })
        },
        getLocation(page = false) {
            // 获取用户定位位置
            uni.getLocation({
                type: 'gcj02',
                isHighAccuracy: true,
                success: (res) => {
                    console.log(res);
                    this.latitude = res.latitude;
                    this.longitude = res.longitude;
                    this.userLocation = {
                        latitude: res.latitude,
                        longitude: res.longitude,
                    };
                    if (page) {
                        console.log('定位后获取');
                        this.get(1);
                    }
                }
            });
        },
        get(page) {
            // 判断搜索是否需要请求 如果搜索内容没有改变 则不请求
            if (this.info.oldSearch == this.info.search && this.info.oldSearch) return;
            else this.info.search = this.info.oldSearch;

            if (page) this.info.page = page;
            this.moxiPost(
                '/plugin/oa/user/customer/search',
                this.info,
                (res) => {
                    console.log(res);
                    if (page == 1) {
                        this.currentIndex = -1;
                        this.$set(this, 'data', res.data.data)
                        if (this.selectList[0].length == 0) {
                            for (let key in res.search) {
                                this.selectList[0].push({
                                    label: key,
                                    status: res.search[key],
                                })
                            }
                        }
                        this.goTop()
                    } else {
                        this.data.push(...res.data.data)
                    }
                    if (res.data.data.length < this.info.page_num) {
                        this.status = 'nomore'
                    } else {
                        this.status = 'loading'
                    }
                }
            )
        }
    }
}
</script>

<style lang="scss" scoped>
.addUser {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;

    .map {
        height: calc(400rpx + 26px + 8px);
        position: relative;
    }

    .controll {
        position: relative;
        z-index: 1;
        flex: 1;
        border-radius: 8px 8px 0 0;
        background-color: #F5F5F5;
        margin-top: -34px;
        padding: 12px 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow: hidden;

        .top {

            .selectList {
                display: flex;
                gap: 12px;
                font-size: 12px;
                justify-content: space-between;
                align-items: center;

                .selectItem {
                    display: flex;
                    align-items: center;
                    gap: 2px;
                }
            }

            .seachInput {
                margin-top: 12px;
                border-radius: 99px;
                background-color: #fff;
                position: relative;
                display: flex;
                overflow: hidden;

                .seachIcon {
                    position: absolute;
                    top: 50%;
                    left: 16px;
                    transform: translateY(-50%);
                }

                input {
                    font-size: 24rpx;
                    padding: 0 8px 0 36px;
                    height: 60rpx;
                    flex: 1;

                    // 修改placeholder颜色
                    &::placeholder {
                        color: red;
                    }
                }

                .seachBtn {
                    padding: 0 16px;
                    border-radius: 0 99px 99px 0;
                    background-color: var(--app-color);
                    color: #fff;
                    position: relative;
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                }
            }
        }

        .scrollY {
            flex: 1;
            overflow: hidden;

            .item {
                padding: 12px;
                border-radius: 8px;
                background-color: #fff;
                border: 1px solid #fff;
                margin-bottom: 12px;
                overflow: hidden;

                &:last-of-type {
                    margin-bottom: 0;
                }

                .top {
                    font-size: 14px;
                    display: flex;
                    gap: 8px;
                    justify-content: space-between;
                    align-items: center;

                    .tag {
                        margin: 0 auto 0 0;
                        font-size: 10px;
                        padding: 4px 8px;
                        color: var(--status-color);
                        border-radius: 4px;
                        position: relative;
                        overflow: hidden;
                        flex-shrink: 0;

                        &::before {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            background-color: var(--status-color);
                            opacity: .1;
                        }
                    }
                }

                .center {
                    padding-top: 8px;
                    margin-top: 8px;
                    border-top: 0.5px solid rgba($color: #000000, $alpha: .08);

                    .tagList {
                        display: flex;
                        gap: 8px;
                        overflow: scroll hidden;
                        margin-bottom: 8px;

                        .tagItem {
                            font-size: 12px;
                            padding: 2px 4px;
                            border-radius: 4px;
                            overflow: hidden;
                            position: relative;
                            white-space: nowrap;
                            flex-shrink: 0;
                            background-color: rgb(230, 233, 236);
                            color: #666;
                        }
                    }

                    .desc {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        gap: 8px;

                        font-size: 12px;
                        color: #666;


                        .icon {
                            flex-shrink: 0;
                            width: 20px;
                            height: 20px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            position: relative;
                            overflow: hidden;
                            border-radius: 50%;
                            background-color: var(--app-color);
                        }
                    }
                }

                &.active {
                    border-color: var(--app-color);
                }
            }

            .loading ::v-deep .u-loadmore {
                margin-top: 0 !important;
            }
        }

        .btn {
            border-radius: 8px;
            padding: 8px 0;
            background-color: var(--app-color);
            color: #fff;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            position: relative;
            overflow: hidden;
        }

    }

    .location {
        position: absolute;
        top: calc(400rpx - 16px - 26px);
        right: 8px;
        padding: 8px;
        border-radius: 8px;
        background-color: #fff;
        overflow: hidden;
        // 阴影
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
}

.pop {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
    }

    .form {
        flex: 1;
        overflow-y: scroll;

        .formItem {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            font-size: 14px;
            color: #666666;
            border-bottom: 0.5px solid #0000001A;
            padding-bottom: 12px;

            .flex {
                display: flex;
                align-items: center;
            }



            &>view:nth-child(1) {
                color: #000;
                font-weight: bold;
                white-space: nowrap;
                width: 88px;
                flex-shrink: 0;
            }

            &:last-of-type {
                margin-bottom: 0;
                border-bottom: 0;
            }
        }
    }

    .tagList {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: wrap;
    }

    .tag {
        padding: 2px 4px;
        border-radius: 4px;
        color: var(--tag-color);
        border: 1px solid var(--tag-color);
        overflow: hidden;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--tag-color);
            opacity: .1;
        }
    }

    .btn {
        flex: 1;
        color: #fff;
        font-weight: bold;
        font-size: 16px;
        text-align: center;
        padding: 8px 0;
        border-radius: 8px;
        position: relative;
        border: 1px solid;
    }

    .u-list-item {
        padding: 0 0 16px 16px;
        font-size: 14px;
        color: #666;
        position: relative;

        .time_line {
            position: absolute;
            left: 0;
            top: 4px;
            width: 12px;
            height: 100%;

            .cricle {
                position: absolute;
                top: 0;
                left: 0;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background-color: var(--bg-color);
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .line {
                position: absolute;
                top: 18px;
                left: 5px;
                width: 2px;
                height: calc(100% - 24px);
                background-color: var(--bg-color);
            }
        }

        .item {
            .title {
                color: #000;
                margin: 0 8px 4px 0;
            }

            .personInfo {
                display: inline-flex;
                align-items: center;
                flex-wrap: nowrap;
                font-size: 12px;
                padding: 3px;
                border: 1px solid var(--app-color);
                color: var(--app-color);
                background-color: var(--bg-color);
                border-radius: 4px;

                .showImg {
                    width: 16px;
                    height: 16px;
                    border-radius: 99px;
                    overflow: hidden;
                }
            }

            .textArea {
                padding: 8px;
                border-radius: 8px;
                background-color: #f2f2f2;
                font-size: 12px;
                margin-bottom: 4px;
            }

            &.flex {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: nowrap;
            }
        }
    }
}

.clickAc:active {
    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.1);
    }
}
</style>